/*
 * DreamTime.
 * Copyright (C) DreamNet. All rights reserved.
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License 3.0 as published by
 * the Free Software Foundation. See <https://www.gnu.org/licenses/gpl-3.0.html>
 * 
 * Written by Ivan Bravo Bravo <ivan@dreamnet.tech>, 2019.
 */

.box {
  @apply bg-dark-600 shadow mb-6 border-t border-l border-r border-dark-100;

  .box__photo {
    @apply relative;
    @apply bg-cover bg-center;
    min-height: 120px;

    .box__photo__content {
      @apply absolute w-full h-full;
      @apply bg-black-70;
    }
  }

  .box__header {
    @apply px-4 pt-2;

    .title {
      @apply text-base font-semibold text-generic-200;
    }

    .subtitle {
      @apply text-sm font-light mb-2;
    }
  }

  .box__content {
    @apply px-4 py-2;
  }

  .box__footer {
    @apply px-4 py-2 text-sm;
    @apply border-t border-dark-400;
  }
}

.box-section {
  @apply px-0 py-2;

  .box-section-item {
    @apply flex py-2 px-4;

    &:not(:last-child) {
      @apply border-b border-dark-400;
    }

    .item-icon {
      @apply mr-4 flex items-center justify-center text-2xl;
      width: 42px;

      img {
        @apply rounded-full;
      }
    }

    .item-text {
      @apply flex-1 flex flex-col justify-center;

      .item-label {
        @apply text-generic-300 font-semibold;
        transition: all 0.1s ease-in-out;
      }

      .item-description {
        @apply text-sm;

        a {
          @apply underline;
        }
      }
    }

    .item-extra {
      @apply ml-4 flex items-center justify-center;
      max-width: 200px;
    }
  }
}
